<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        window.onload = function () {


            // 当失去光标时单独验证  最终提交时全部验证通过提交


            document.querySelector("#myform").onsubmit = function () {
                //当所有的结果都符合标准才提交
                // var a = checkUserName();
                // console.log(a)
                // var b = checkPassWord();
                // console.log(b)
                // var c = checkEmail();
                // console.log(c)

                //当条件都满足 就提交

                return checkUserName() && checkPassWord() && checkEmail();
            }

            //当失去光标时 用户名 密码 邮箱都需要自己验证一次
            var username = document.querySelector("#username");
            var password = document.querySelector("#password");
            var email = document.querySelector("#email");

            //执行函数
            username.onblur = checkUserName;
            password.onblur = checkPassWord;
            email.onblur = checkEmail;






            //用户名
            function checkUserName() {
                var flag = false;
                console.log("失去光标");
                //获取输入的用户名的值
                var usernameval = username.value.trim();

                //判断用户名是否符合要求
                if (usernameval.length >= 6 && usernameval.length <= 12) {
                    //符合规则
                    document.querySelector("#username_msg").innerText = "检验通过";
                    flag = true;
                } else {
                    //不符合规则

                    document.querySelector("#username_msg").innerText = "用户名不符合规范";
                }

                return flag;//返回结果

            }


            //密码
            function checkPassWord() {
                var flag = false;

                var passwordval = password.value.trim();

                //判断用户名是否符合要求
                if (passwordval.length >= 6 && passwordval.length <= 12) {
                    //符合规则
                    document.querySelector("#password_msg").innerText = "检验通过";
                    flag = true;
                } else {
                    //不符合规则

                    document.querySelector("#password_msg").innerText = "密码不符合规范";
                }

                return flag;//返回结果

            }

            //邮箱
            function checkEmail() {
                var flag = false;
                var emailval = email.value.trim();
                if (emailval.indexOf("@") != -1) {
                    //符合
                    document.querySelector("#email_msg").innerText = "检验通过";
                    flag = true;
                } else {
                    //不符合
                    document.querySelector("#email_msg").innerText = "邮箱不符合规范";

                }

                return flag;
            }




        }


    </script>
</head>

<body>
    <form action="#" method="post" id="myform">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="username" id="username"></td>
                <td><span id="username_msg">请输入用户名</span></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password" id="password"></td>
                <td><span id="password_msg">请输入密码</span></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" name="email" id="email"></td>
                <td><span id="email_msg">请输入邮箱</span></td>
            </tr>
            <tr>
                <td><input type="submit"></td>
                <td><input type="reset"></td>
            </tr>
        </table>
    </form>


</body>

</html>